<template>
	<scroll-view class="screen-full" :scroll-top="scrollTop" :scroll-y="true" :scroll-with-animation="false"
		@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @scroll="scroll"
		@scrolltolower="scrolltolower">
		<tn-navbar fixed :bottom-shadow="false" bg-color="#fff">
			<template #back>
				<view class="go-back">首页</view>
			</template>
		</tn-navbar>
		<view class="bg-color-white">
			<view class="search-top c-flex c-flex-nowrap">
				<view class="search-location c-flex c-flex-nowrap c-row-left c-col-center">
					<tn-icon name="location" :custom-style="style" />
					<view class="location-select" @tap="openView('/pages/map/index')">
						<text class="font-size-14 color-3333">请选择</text>
						<tn-icon name="down" size="24prx" color="#333"></tn-icon>
					</view>
				</view>
				<view class="search-input tn-flex-1 c-flex c-flex-nowrap c-col-center c-row-center">
					<view class="search-keyword">
						<tn-input v-model="keyword" height="60rpx" :placeholder-style="pStyle" placeholder="请输入商家/商品名称"
							:border="false" shape="round" text-align="center" :clearable="false" :search-button="false"></tn-input>
					</view>
				</view>
				<view class="c-flex c-flex-nowrap c-col-center c-row-right">
					<image src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3542.svg" class="icon-svg" @tap="openView('/pages/chat/index')"></image>
					<image
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3543.svg"
						class="icon-svg tn-ml" @tap="openView('/pages/sgin/in')"></image>
				</view>
			</view>
			<view class="c-flex c-col-center c-row-center">
				<view class="swiper-limit">
					<tn-swiper v-model="currentSwiperIndex" :data="swiperData" :loop="true" :autoplay="true" indicator-type="dot"
						indicator-position="center-bottom" indicator-bg-color="#c6d3e0" indicator-active-bg-color="#fff"
						:indicator="true" width="100%" height="300rpx">
						<template #default="{ data }">
							<view class="swiper-data screen-full">
								<image :src="data" mode="aspectFill" />
							</view>
						</template>
					</tn-swiper>
				</view>
			</view>
			<view class="c-p-t-15 c-flex c-flex-nowrap c-col-center c-row-center c-p-l-10 c-p-r-10">
				<view class="flex-list c-flex-divide c-flex c-flex-nowrap c-col-center c-row-center"  @tap="openView('/pages/nav/delicious')">
					<view class="c-flex-col c-flex-divide">
						<view class="c-flex c-flex-nowrap c-col-center c-row-center">
							<image class="icon-image"
								src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3519.png">
							</image>
						</view>
						<view class="c-m-t-5 c-flex c-flex-nowrap c-col-center c-row-center">
							<text class="font-size-12 color-3333">大牌美食</text>
						</view>
					</view>
					<view class="c-flex-col c-flex-divide">
						<view class="c-flex c-flex-nowrap c-col-center c-row-center">
							<image class="icon-image"
								src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3522.png">
							</image>
						</view>
						<view class="c-m-t-5 c-flex c-flex-nowrap c-col-center c-row-center">
							<text class="font-size-12 color-3333">大众饮食</text>
						</view>
					</view>
					<view class="c-flex-col c-flex-divide">
						<view class="c-flex c-flex-nowrap c-col-center c-row-center">
							<image class="icon-image"
								src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3525.png">
							</image>
						</view>
						<view class="c-m-t-5 c-flex c-flex-nowrap c-col-center c-row-center">
							<text class="font-size-12 color-3333">美美哒</text>
						</view>
					</view>
					<view class="c-flex-col c-flex-divide">
						<view class="c-flex c-flex-nowrap c-col-center c-row-center">
							<image class="icon-image"
								src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3535.svg">
							</image>
						</view>
						<view class="c-m-t-5 c-flex c-flex-nowrap c-col-center c-row-center">
							<text class="font-size-12 color-3333">居家生活</text>
						</view>
					</view>
					<view class="c-flex-col c-flex-divide">
						<view class="c-flex c-flex-nowrap c-col-center c-row-center">
							<image class="icon-image"
								src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3538.svg">
							</image>
						</view>
						<view class="c-m-t-5 c-flex c-flex-nowrap c-col-center c-row-center">
							<text class="font-size-12 color-3333">休闲娱乐</text>
						</view>
					</view>
				</view>
			</view>
			<view class="c-p-t-15 c-p-b-10 c-flex c-flex-nowrap c-col-center c-row-center">
				<view class="bg-img">
					<image class="screen-full"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3556.png">
					</image>
					<image class="pos-img"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3557.png">
					</image>
					<view class="pos-txt c-flex c-flex-nowrap c-col-center c-row-center">
						<text class="font-size-20 color-white c-m-r-10">限时秒杀超值优惠券</text>
						<tn-icon name="right" color="#fff" size="30rpx"></tn-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-color-white c-m-t-15">
			<view class="title-top c-p-l-15 c-flex c-flex-nowrap c-col-center c-row-left">
				<text class="font-size-15 font-w-7 color-3333">为你推荐</text>
			</view>
			<view class="c-p-l-10 c-p-r-10 c-p-b-15 grid">
				<view class="pos-rel">
					<image class="img-svg"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3528.svg">
					</image>
					<view class="pos-abs abs-text c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-14 color-white">一元观影</text>
					</view>
					<view class="pos-abs abs-txt c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-12 color-white">海量电影 超值特惠</text>
					</view>
				</view>
				<view class="pos-rel">
					<image class="img-svg"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3529.svg">
					</image>
					<view class="pos-abs abs-text c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-14 color-white">甜蜜时光</text>
					</view>
					<view class="pos-abs abs-txt c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-12 color-white">浓情蜜意 超值套餐</text>
					</view>
				</view>
				<view class="pos-rel">
					<image class="img-svg"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3530.svg">
					</image>
					<view class="pos-abs abs-text c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-14 color-white">指间狂想</text>
					</view>
					<view class="pos-abs abs-txt c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-12 color-white">千挑万选 超值套餐</text>
					</view>
				</view>
				<view class="pos-rel">
					<image class="img-svg"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3531.svg">
					</image>
					<view class="pos-abs abs-text c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-14 color-white">不醉不归</text>
					</view>
					<view class="pos-abs abs-txt c-flex c-flex-nowrap c-col-center c-row-left">
						<text class="font-size-12 color-white">酒不醉 人人自醉</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-color-white c-m-t-15">
			<view class="title-top c-p-l-15 c-flex c-flex-nowrap c-col-center c-row-left">
				<text class="font-size-15 font-w-7 color-3333">附件活动</text>
			</view>
			<view class="c-p-l-10 c-p-r-10">
				<view class="data-list">
					<view v-for="(item, index) in dataList" :key="index" class="data-item pos-rel c-flex c-flex-nowrap">
						<view class="br-img">
							<image src="https://img.alicdn.com/bao/uploaded/i1/79039087/O1CN013zCuqz2GztcAUCTCT_!!79039087.jpg">
							</image>
						</view>
						<view class="c-flex-divide c-flex-col c-p-l-10">
							<view class="">
								<text class="font-size-13 color-5555">【鹿子星茶】奶香奶茶系列</text>
							</view>
							<view class="c-flex c-flex-nowrap c-row-between c-col-center c-m-t-5">
								<text class="font-size-12 color-aaaa">鹿野茶（天一店）</text>
								<text class="font-size-12 color-3333">258m</text>
							</view>
							<view class="c-m-t-5 c-flex c-flex-nowrap c-row-left c-col-center">
								<image class="eye"
									src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3566.png">
								</image>
								<text class="c-m-l-5 font-size-12 color-aaaa">20</text>
								<image class="qie c-m-l-5"
									src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3567.png">
								</image>
								<text class="c-m-l-5 font-size-12 color-aaaa">20</text>
							</view>
							<view class="c-m-t-8">
								<text class="font-size-14 font-w-7 color-476d">￥14.70</text>
							</view>
							<view class="c-m-t-4">
								<text class="font-size-12 color-aaaa text-decor">￥15.00</text>
							</view>
							<view :class="['pos-abs', 'abs-status', 'status-' + item.status]">
								<text class="font-size-13 color-white" v-text="statusObject[item.status]"></text>
							</view>
						</view>
					</view>
				</view>
				<view v-show="isLoading" class="c-flex c-flex-nowrap c-row-center c-col-center">
					<tn-loading show animation type="primary" size="40rpx" />
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import {
		nextTick,
		ref
	} from 'vue';

	const currentSwiperIndex = ref<number>(0)

	const dataList = ref<any>([])

	const isLoading = ref<boolean>(false)

	const scrollTop = ref<number>(0)

	const scrollRealTop = ref<number>(0)

	const scrollHeight = ref<number>(0)

	const statusObject = {
		0: '砍价',
		1: '继续砍价',
		2: '已抢完'
	}

	const openView = (url: string) => {
		uni.navigateTo({
			url: url,
		})
	}
	
	const initDataList = () => {
		for (let i = 0; i < 10; i++) {
			dataList.value.push({
				name: '【鹿子星茶】奶香奶茶系列',
				status: i % 3
			})
		}
	}

	initDataList()

	// 轮播图数据
	const swiperData = [
		'https://resource.tuniaokj.com/images/xiongjie/x14.jpg',
		'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg',
		'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
		'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new1.png',
		'https://resource.tuniaokj.com/images/xiongjie/xiong-3d.jpg',
	]

	const keyword = ref('')

	const style = {
		fontSize: '20px',
		color: '#476dea',
	}

	const pStyle = {
		fontWeight: 400,
		fontStyle: 'normal',
		fontSize: '24rpx',
		color: '#555555'
	}

	const scrolltolower = (e : any) => {
		console.log('scrolltolower = ', e)
		if (isLoading.value) {
			return
		}
		isLoading.value = true
		setTimeout(() => {
			isLoading.value = false
			nextTick(initDataList)
		}, 3000)
	}

	const touchstart = (e : any) => {
		console.log('touchstart = ', e)
	}

	const touchmove = (e : any) => {
		console.log('touchmove = ', e)
	}

	const touchend = (e : any) => {
		console.log('touchend = ', e)
	}

	const scroll = (e : any) => {
		console.log('scroll = ', e)
		const { detail } = e
		// 更新滚动条的位置
		scrollRealTop.value = detail.scrollTop
		// 更新滚动内容高度
		scrollHeight.value = detail.scrollHeight
	}
</script>
<style scoped lang="scss">
	.go-back {
		height: 80rpx;
		display: flex;
		padding-left: 30rpx;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
		color: #333;
	}

	.search-top {
		height: 84rpx;
		background-color: $uni-bg-color;
		padding: 0 30rpx;
	}

	.search-location {

		.location-select {
			padding-left: 20rpx;
		}
	}

	.search-keyword {
		width: 360rpx;
		height: 60rpx;
		background-color: rgba(209, 209, 209, 0.2);
		border-radius: 30rpx;
	}

	.icon-svg {
		width: 48rpx;
		height: 48rpx;
	}

	.swiper-limit {
		width: 710rpx;
	}

	.icon-image {
		width: 100rpx;
		height: 100rpx;
	}

	.bg-img {
		position: relative;
		width: 710rpx;
		height: 132rpx;

		.pos-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 184rpx;
			height: 116rpx;
		}

		.pos-txt {
			position: absolute;
			left: 184rpx;
			top: 0;
			right: 0;
			bottom: 0;
		}
	}

	.title-top {
		height: 90rpx;
	}

	.grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10rpx 10rpx;

		.img-svg {
			width: 350rpx;
			height: 200rpx;
		}
	}

	.abs-text {
		left: 20rpx;
		top: 50rpx;
		right: 0;
	}

	.abs-txt {
		left: 20rpx;
		top: 100rpx;
		right: 0;
	}
	
	.main-container {
		height: 100vh;
	}
</style>